<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="message">
<button id="send-message">send message</button>
<script>
  //编写js使用的webSocket
  //创建webSocket的实例
  let websocket=new WebSocket("ws://localhost:8080/test");
  //给webSocket注册回调函数
  websocket.onopen=function (){
    //连接完成后自动执行
    console.log("connect successful");
  }
  websocket.onclose=function (){
    //连接断开后自动执行
    console.log("connect break");
  }
  websocket.onerror=function (){
    //连接异常后自动执行
    console.log("连接异常")
  }
  websocket.onmessage=function () {
    //收到消息自动执行
    console.log("收到消息")
  }
  let messageInput=document.querySelector("#message");
  let sendButton=document.querySelector("#send-message");
   sendButton.onclick=function (){
     console.log("input message ->"+messageInput.value);
    websocket.send(messageInput.value);
  }
</script>
</body>
</html>